<template>
  <div>
    <div class="docs" v-for="(item,index) in docs">
      <div class="img">
        <img :src="require('../../../assets/img/word_logo.png')" alt="">
      </div>
      <div class="content">
        <h5 style="width: 30%">{{item.title}}</h5>
        <h5 style="float: right;margin-right: 30px">{{item.createTime}}</h5>

        <a :href="url"><el-button @click="downDoc(item.id)" size="mini"><i class="el-icon-download"></i></el-button></a>
      </div>
    </div>
  </div>
</template>

<script>
import {getPractice} from "../../../network/data";
import {baseUrl} from "../../../network/baseUrl";

export default {
  name:'practice',
  data(){
    return{
      baseUrl:baseUrl(),
      dialogVisible:false,
      url:'',
      docs:[
      ],
      fileList:[],
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      getPractice()
          .then(res=>{
            console.log(res)
            this.docs=res.data.extend.practiceMap[0]
            console.log(this.docs)
          })
    },
    downDoc(id){
      this.url=baseUrl()+'/data/downloadPractice/'+id
    },

  }

}
</script>

<style scoped>
h5{
  padding: 0;
  margin: 0;
}
.docs{
  cursor: pointer;
  width: 100%;
  height: 40px;
  transition: all .1s;
  border-bottom: 1px solid gainsboro;
}
.docs:hover{
  background-color: gainsboro;
}
.docs .img{
  float: left;
  height: 100%;
  width: 60px;
}
.docs img{
  height: 100%;
  width: 100%;
}
.content{
  float: left;
  height: 100%;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content h5{
  line-height: 40px;
}
</style>